<template>
  <div class="app-container">
    <div class="filterDiv">
      <el-radio-group v-model="coaClassCode" size="small" @change="getData">
        <el-radio-button label>全部</el-radio-button>
        <el-radio-button v-for="(item,index) in coaClassList" :key="index" :label="item.coaClassCode">{{ item.coaClassName }}</el-radio-button>
      </el-radio-group>
      <el-button v-permiss="['60207870']" type="primary" size="small" style="float:right" round @click="updateDispNameByUuid()">校正名称</el-button>
    </div>
    <div class="contentDiv">
      <el-table :data="tableData" fit resize empty-text="无同步数据" style="width: 100%;" size="small">
        <el-empty slot="empty" :image-size="120" description="暂无数据" />
        <el-table-column label="科目编码" width="100" align="left">
          <template slot-scope="{row}">
            <span>{{ row.coaCode }}</span>
          </template>
        </el-table-column>
        <el-table-column label="科目名称" show-overflow-tooltip align="left">
          <template slot-scope="{row}">
            <span v-html="row.pageCoaName" />
          </template>
        </el-table-column>
        <el-table-column label="科目分类" min-width="100" align="center">
          <template slot-scope="{row}">
            <span>{{ row.coaClassName }}</span>
          </template>
        </el-table-column>
        <el-table-column label="方向" width="80" align="center">
          <template slot-scope="{row}">
            <span>{{ row.crDr == 1?'借':'贷' }}</span>
          </template>
        </el-table-column>
        <el-table-column label="辅助核算" min-width="80" align="center">
          <template slot-scope="{row}">
            <span>{{ row.isAuxiliary == 1?'是':'否' }}</span>
          </template>
        </el-table-column>
        <el-table-column label="数量核算" min-width="80" align="center">
          <template slot-scope="{row}">
            <span>{{ row.isQuantity == 1?'是':'否' }}</span>
          </template>
        </el-table-column>
        <el-table-column label="禁用" min-width="80" align="center">
          <template slot-scope="{row}">
            <span>{{ row.isDisable == 1?'是':'否' }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="200" align="center">
          <template slot-scope="{row}">
            <el-button v-permiss="['60207820']" type="text" size="small" @click="handleAdd(row)">新增下级</el-button>
            <el-button v-permiss="['60207830']" type="text" size="small" @click="handleCompile(row)">修改</el-button>
            <el-button v-permiss="['60207860']" type="text" size="small" @click="handleDel(row)">删除</el-button>
            <el-button v-permiss="['60207850']" type="text" size="small" @click="handleDisable(row)">{{ row.isDisable == 1?'解禁':'禁用' }}</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-dialog :close-on-click-modal="false" :title="dialogStatus=='create'?'新增下级科目':'修改科目'" :visible.sync="dialogVisible" width="680px">
      <el-form ref="dataForm" :rules="rules" :model="form" :inline="true" label-position="right" label-width="85px" style="width: 580px; margin-left:10px;">
        <el-form-item label="科目类别" prop="coaClassId">
          <el-input v-model="form.coaClassName" placeholder="科目类别" disabled />
        </el-form-item>
        <el-form-item label="科目代码" prop="coaCode">
          <el-input v-model="form.coaCode" placeholder="科目代码" :disabled="dialogStatus=='update' && form.unchageableFlag==1" />
        </el-form-item>
        <el-form-item label="科目名称" prop="coaName" min-width="220">
          <el-input v-model="form.coaName" placeholder="科目名称" :disabled="dialogStatus=='update' && form.unchageableFlag==1" />
        </el-form-item>
        <el-form-item v-if="dialogStatus=='create'" label="上级科目" prop="parentId">
          <el-input v-model="parentName" placeholder="上级科目" disabled />
        </el-form-item>
        <el-form-item v-if="dialogStatus=='update'" label="上级科目" prop="parentId">
          <el-input v-for="item in coaArr" v-show="form.parentId == item.id" :key="item.id" v-model="item.coaName" placeholder="上级科目" disabled />
        </el-form-item>
        <el-form-item label="借贷方向" prop="crDr" style="width:265px">
          <el-radio v-model="form.crDr" :label="1" :disabled="dialogStatus=='update' && form.unchageableFlag==1">借</el-radio>
          <el-radio v-model="form.crDr" :label="-1" :disabled="dialogStatus=='update' && form.unchageableFlag==1">贷</el-radio>
        </el-form-item>
        <el-form-item label="是否现金" prop="cashFlowFlag" style="width:265px">
          <el-radio v-model="form.cashFlowFlag" :label="1">是</el-radio>
          <el-radio v-model="form.cashFlowFlag" :label="0">否</el-radio>
        </el-form-item>
        <el-form-item v-if="form.noAuxiliary == 0 && dialogStatus == 'create'" label style="width:600px">
          <el-checkbox v-model="form.isAuxiliary" :disabled="isForceAddChild==1" :false-label="0" :true-label="1">辅助核算(至多选6项)</el-checkbox>
          <el-checkbox v-model="form.isQuantity" :disabled="isForceAddChild==1" :false-label="0" :true-label="1">数量核算</el-checkbox>
          <el-input v-if="form.isQuantity==1" v-model="form.uom" size="small" :disabled="isForceAddChild==1" placeholder="计量单位" style="width:120px" />
        </el-form-item>
        <el-form-item v-if="dialogStatus == 'update'" label style="width:600px">
          <el-checkbox v-model="form.isAuxiliary" :disabled="form.noAuxiliary==1 || form.leaf==0 || form.usedFlag==1" :false-label="0" :true-label="1">辅助核算(至多选6项)</el-checkbox>
          <el-checkbox v-model="form.isQuantity" :disabled="form.noAuxiliary==1 || form.leaf==0 || form.usedFlag==1" :false-label="0" :true-label="1">数量核算</el-checkbox>
          <el-input v-if="form.isQuantity==1" v-model="form.uom" :disabled="form.noAuxiliary==1 || form.leaf==0 || form.usedFlag==1" placeholder="计量单位" style="width:100px" />
        </el-form-item>
        <el-form-item v-if="form.isAuxiliary==1" style="width:600px">
          <template v-for="(item, index) in auxiliaryArr">
            <el-checkbox :key="index + 'aux'" v-model="form.auxiliary[item.seq-1]" :checked="form.auxiliary&&form.auxiliary[item.seq - 1]==1" false-label="0" true-label="1">{{ item.auxiliaryTypeName }}</el-checkbox>
          </template>
        </el-form-item>
        <el-form-item label="是否启用" style="width:610px">
          <el-radio v-model="form.isDisable" :disabled="form.unchageableFlag===1" :label="0">是</el-radio>
          <el-radio v-model="form.isDisable" :disabled="form.unchageableFlag===1" :label="1">否</el-radio>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer" align="center">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="save()">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { mapGetters } from 'vuex'
import { getCoaDatatables, coaClassification, delCoa, updateDisabledCoa, saveCoa, updateDispName, getGlCoaCode } from '@/api/user'
import { getCoaCodeUsedByIdNoSysTemplet, getCoaCodeUsedById, getMsgBeforeDelete } from '@/api/user'
import { deepClone } from '@/utils/index.js'
export default {
  name: 'CoaList',
  data() {
    return {
      form: {
        id: '',
        coaClassId: '',
        coaClassName: '',
        coaCode: '',
        coaName: '',
        parentId: '',
        crDr: 1,
        isDisable: 0,
        isAuxiliary: 0,
        isQuantity: 0,
        uom: '',
        cashFlowFlag: 0,
        auxiliary: [0, 0, 0, 0, 0, 0, 0, 0],
        unchageableFlag: 0,
        coaHierarchyId: '',
        coaLevel: '',
        coaIndustryId: '',
        dispName: '',
        noAuxiliary: '',
        usedFlag: 0,
        leaf: 0
      },
      resetform: {
        id: '',
        coaClassId: '',
        coaClassName: '',
        coaCode: '',
        coaName: '',
        parentId: '',
        crDr: 1,
        isDisable: 0,
        isAuxiliary: 0,
        isQuantity: 0,
        uom: '',
        cashFlowFlag: 0,
        auxiliary: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
        unchageableFlag: 0,
        coaHierarchyId: '',
        coaLevel: '',
        coaIndustryId: '',
        dispName: '',
        noAuxiliary: '',
        usedFlag: 0,
        leaf: 0
      },
      parentName: '',
      rules: {
        coaName: [{ required: true, message: '不能为空', trigger: 'change' }],
        coaCode: [{ required: true, message: '不能为空', trigger: 'change' }]
      },
      isForceAddChild: 0,
      dialogStatus: 'update',
      dialogVisible: false,
      coaClassCode: '',
      coaClassList: [],
      tableData: []
    }
  },
  computed: {
    ...mapGetters(['coaArr', 'auxiliaryArr'])
  },
  mounted() {
    this.$store.dispatch('voucher/getCoaList', 0)
    this.$store.dispatch('voucher/getAuxiliaryTypeList')
    this.getData()
    this.getCoaClass()
  },
  methods: {
    handleCompile(row) {
      for (var key in this.form) {
        this.form[key] = row[key]
      }
      this.form.auxiliary = (row.auxiliary || '000000000000000').split('')
      this.dialogStatus = 'update'
      this.dialogVisible = true
      this.$nextTick(() => {
        this.$refs['dataForm'].clearValidate()
      })
    },
    handleAdd(row) {
      this.isForceAddChild = 0
      getCoaCodeUsedByIdNoSysTemplet(row.id).then((res) => {
        if (res.data.data == 1) {
          this.$confirm(
            '本科目已被使用，增加第一个下级科目时，系统将把上述信息更新至新增的下级科目中,是否继续？',
            '提示',
            {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            }
          ).then(() => {
            this.isForceAddChild = 1
            console.log('强制增加下级')
            this.initAddFrom(row)
          })
        } else {
          getCoaCodeUsedById(row.id).then((rep) => {
            this.isForceAddChild = rep.data.data
            this.initAddFrom(row)
          })
        }
      })
    },
    initAddFrom(row) {
      for (var key in this.form) {
        this.form[key] = this.resetform[key]
      }
      this.form.coaClassName = row.coaClassName
      this.form.coaClassId = row.coaClassId
      this.form.parentId = row.id
      this.parentName = row.coaName
      this.form.cashFlowFlag = row.cashFlowFlag
      this.form.crDr = row.crDr
      this.dialogStatus = 'create'
      this.dialogVisible = true
      this.$nextTick(() => {
        this.$refs['dataForm'].clearValidate()
      })
      var obj = {
        coaCode: row.coaCode,
        coaLevel: row.coaLevel,
        coaStartCode: row.coaStartCode
      }
      getGlCoaCode(obj).then((res) => {
        this.form.coaCode = res.data.data
      })
    },
    updateDispNameByUuid() {
      var id = sessionStorage.bookId
      updateDispName(id).then((res) => {
        if (res.data.errorCode === '0') {
          this.getData()
          this.$message.success(res.data.msg)
        }
      })
    },
    getCoaClass() {
      coaClassification({ coaClassLevel: 1 }).then((res) => {
        this.coaClassList = res.data.data
      })
    },
    getData() {
      getCoaDatatables({ coaClassCode: this.coaClassCode }).then((res) => {
        if (res.data.errorCode === '0') {
          this.tableData = res.data.data
        }
      })
    },
    save() {
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          const obj = deepClone(this.form)
          obj.auxiliary = this.form.auxiliary.join('')
          saveCoa(obj).then((res) => {
            if (res.data.errorCode === '0') {
              this.getData()
              this.dialogVisible = false
              this.$message.success(res.data.msg)
            }
          })
        }
      })
    },
    handleDisable(row) {
      var isDisable = row.isDisable
      var coaCode = row.coaCode
      var coaName = row.coaName
      var info = ''
      if (isDisable !== 1) {
        isDisable = 1
        info = '确定要禁用【' + coaCode + ' ' + coaName + '】及子科目吗？'
      } else {
        isDisable = 0
        const coaTxt = coaCode + ' ' + coaName
        info = '确定要解除禁用【' + coaTxt + '】及父科目(禁用的子科目并不会同时解除禁用)吗？'
      }
      this.$confirm(info, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        var obj = {
          id: row.id,
          coaCode: row.coaCode,
          isDisable: isDisable
        }
        updateDisabledCoa(obj).then((res) => {
          if (res.data.errorCode === '0') {
            this.getData()
            this.$message.success(res.data.msg)
          }
        })
      })
    },
    handleDel(row) {
      getMsgBeforeDelete(row.id).then((resp) => {
        if (resp.data.errorCode === '0') {
          this.$confirm(resp.data.msg, '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this.delCourse(row.id)
          }).catch((err) => {
            console.log(err)
          })
        }
      })
    },
    delCourse(id) {
      delCoa(id).then((res) => {
        if (res.data.errorCode === '0') {
          this.getData()
          this.$message.success(res.data.msg)
        }
      })
    }
  }
}
</script>
<style scoped>
.label {
  font-size: 14px;
  margin-right: 5px;
  color: #333;
  margin-left: 10px;
}

.label:first-child {
  margin-left: 0;
}
</style>
